<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="姓名" prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="联系电话" prop="phone" style="margin-right:15px">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所属机构" prop="departmentCode" style="margin-right:15px">
              <groupSelect @setGroupCode="setGroupCode" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="职位" prop="position" style="margin-right:15px">
              <el-select v-model="form.positionName" placeholder="请选择职位" clearable style="width:100%" @change="positionChange($event)">
                <el-option
                  v-for="item in positionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="工号" prop="employeeNumber" style="margin-right:15px">
              <el-input v-model="form.employeeNumber" placeholder="请输入工号" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="入职日期" prop="enrollmentDate" style="margin-right:15px">
              <el-date-picker style="width:100%" v-model="form.enrollmentDate" type="date" placeholder="请选择入职日期" value-format="yyyy-MM-dd HH-mm-ss"> </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="用工类型" prop="employmentType" style="margin-right:15px">
              <el-select v-model="form.employmentType" placeholder="请选择用工类型" clearable style="width:100%">
                <el-option
                  v-for="item in employmentList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="劳务外包方" prop="outsourcer" style="margin-right:15px">
              <el-select v-model="form.outsourcerName" placeholder="请选择劳务外包方" clearable style="width:100%" @change="outsourcerChange($event)">
                <el-option
                  v-for="item in outsourcerList"
                  :key="item.code"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <div class="grid-content bg-purple">-->
<!--            <el-form-item  prop="salesMan" style="margin-right:15px">-->
<!--              <el-switch-->
<!--                v-model="salesMan"-->
<!--                active-text="是业务员"-->
<!--                inactive-text="非业务员" @change="changeValue($event)">-->
<!--              </el-switch>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="父账号" prop="parentCode" style="margin-right:15px"  v-if="isParent">
              <el-select v-model="parentCode" placeholder="请选择"  clearable  @change="changeParentCode($event)">
                <el-option
                  v-for="item in parentData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
import groupSelect from "./groupSelect";
import { listDict } from "@/api/store";
Vue.use(VXETable)
export default {
  name: 'PartyAdd',
  components: {
    groupSelect
  },
  data() {
    // 校验手机号
    const validatePhone = (rule, value, callback) => {
      const phoneReg = /^[1][0-9]{10}$/
      if (!phoneReg.test(value)) {
        callback(new Error('格式有误'))
      } else {
        callback()
      }
    }
    return {
      isDisable:false,
      isParent:false,
      parentData:[],
      salesMan:false,
      parentCode:'',
      form: {
        partyType: 'STAFF',
        branchCode: '',
        departmentCode: '',
        parentCode:'',
        teamCode: '',
        name: '',
        phone: '',
        isSalesMan:0,
      },
      employmentList: [
        {
          code: 'regular',
          name: '正式工'
        },{
          code: 'temp',
          name: '临时工'
        },{
          code: 'out',
          name: '外包工'
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        departmentCode: [
          { required: true, message: '请选择所属部门', trigger: 'blur' }
        ],
        parentCode: [
          { required: true, message: '请选择父账号', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ]
      },
      positionList: [],
      outsourcerList: []
    }
  },
  created() {
    this.getCascadeData()
  },
  methods: {
    // 重置
    // reset(){
    //   this.$refs['form'].resetFields()
    //   this.$refs.groupSelect.setSelectValue('')
    // },
    // 获取字典数据 = 职位、劳务外包方
    getCascadeData() {
      listDict('positionType').then(response => {
        this.positionList = response.data[0].dictList
      })
      listDict('outsourcerType').then(response => {
        this.outsourcerList = response.data[0].dictList
      })
    },
    // 选择传值 字典数据 = 职位、劳务外包方
    positionChange(e) {
      this.form.position = e.code
      this.form.positionName = e.name
    },
    outsourcerChange(e) {
      this.form.outsourcer = e.code
      this.form.outsourcerName = e.name
    },
    changeValue(value){
      if (value == true){
        this.form.isSalesMan = 1;
        this.isParent = true
        if (this.form.branchCode != null && this.form.branchCode != ''){
          request({
            url: '/arpa-basic-api/staffs/chooseDataNotSalesMan',
            method: 'get',
            params: {isSalesMan:0,code:this.form.code,branchCode:this.form.branchCode}
          }).then(response => {
            this.parentData = response.data
          })
        }
      }else{
        this.form.isSalesMan = 0;
        this.isParent = false
      }
    },
    changeParentCode(value){
      this.parentCode = value
      this.form.parentCode = value
    },
    setGroupCode(value){
      this.form.branchCode = value[0]
      this.form.departmentCode = value[1]
      this.form.teamCode = value[2]
      this.parentCode = ''
      if (this.form.isSalesMan == 1 && this.form.branchCode != null && this.form.branchCode != ''){
        request({
          url: '/arpa-basic-api/staffs/chooseDataNotSalesMan',
          method: 'get',
          params: {isSalesMan:0,code:this.form.code,branchCode:this.form.branchCode}
        }).then(response => {
          this.parentData = response.data
        })
      }
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true
          const data = this.form
          request({ url: '/arpa-basic-api/staffs', method: 'post', data }).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherAddMethod')
            this.isDisable = false
          }).then(() => {
              // this.$refs['form'].resetFields()
              // this.$refs.groupSelect.setSelectValue('')
            }).catch(() => this.isDisable = false)
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin:15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
